<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户中心</title>
<include file="public:header" />
<style type="text/css">
.layui-icon-login-qq:hover,.layui-icon-login-weibo:hover,.layui-icon-login-wechat:hover {
	color: #1890ff;
}
</style>
</head>
<body>
<div id="header" class="layui-bg-cyan">
	<div class="layui-container">
		<div class="fl">
			<li class="nav-item active"><a href="/" class="nav-link">返回</a></li>
		</div>
		<div class="fr">
			<li class="nav-item"><a href="/user/index" class="nav-link"><img src="{$data.avatar}" alt="{$data.nickname}">{$data.nickname|default=$data.name}</a>
		</div>
	</div>
</div>
<div id="content">
	<div class="layui-clear" ></div>
	<div class="layui-container">
		<div class="layui-row layui-col-space30">
			<div class="layui-col-md3">
				<div class="layui-card">
					<div class="layui-card-header layui-bg-cyan">导航</div>
					<div class="layui-card-body" id="userNav" >
						<include file="/user/userNav">
					</div>				
				</div>		   
		    </div>
		    <div class="layui-col-md9">

				<div class="layui-card" >
					<div class="layui-card-header layui-bg-cyan">个人资料</div>
					<div class="layui-card-body" style="overflow:hidden;" >
						<div class="layui-user-avatar" >
							<img src="{$data.avatar}" alt="{$data.nickname}" class="imgHead"  >
						</div>

						<form action="/user/profile" class="layui-form layui-form-fixed">
							<input type="text" name="id" value="{$data.id}" hidden="">
							<div class="layui-form-item">
								<label class="layui-form-label">用户帐号</label>
								<div class="layui-input-block">
								  <div class="layui-form-mid layui-word-aux">{$data.nickname}</div>
								</div>
							</div>		
							<div class="layui-form-item">
								<label class="layui-form-label">用户昵称</label>
								<div class="layui-input-inline">
								  <input type="text" name="nickname" class="layui-input" value="{$data.nickname}">
								</div>
							</div>		
							<div class="layui-form-item">
								<label class="layui-form-label">用户邮箱</label>
								<div class="layui-input-inline">
								  <input type="text" name="email" class="layui-input layui-disabled" value="{$data.email}">
								</div>
								<button type="button" class="layui-btn layui-btn-sm layui-btn-normal" 
								lay-open lay-title="修改邮箱" lay-url="#email" lay-area="430px,300px" >修改</button>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">用户手机号</label>
								<div class="layui-input-inline">
								  <input type="text" name="mobile" class="layui-input layui-disabled" value="{$data.mobile}">
								</div>
								<button type="button" class="layui-btn layui-btn-sm layui-btn-normal" 
								lay-open lay-title="修改手机" lay-url="#mobile" lay-area="430px,300px" >修改</button>
							</div>							
							<div class="layui-form-item">
								<label class="layui-form-label">第三方绑定</label>

								<div class="layui-input-inline">

									<if check_user_third('qq',$data['id']) >
									  <a lay-ajax lay-url="{:url('/third/unbind/type/qq')}" title="点击解绑" type="button" 
										class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon layui-icon-login-qq"></i></a>										
										<else/>
									  <a data-url="{:url('/third/bind/type/qq')}" title="点击绑定" type="button" 
										class="layui-btn layui-btn-primary layui-btn-sm layui-bind-third"><i class="layui-icon layui-icon-login-qq"></i></a>	
									</if>

									<if check_user_third('weixin',$data['id']) >
									  <a lay-ajax lay-url="{:url('/third/unbind/type/weixin')}" title="点击解绑" type="button" 
										class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon layui-icon-login-wechat"></i></a>										
										<else/>
									  <a data-url="{:url('/third/bind/type/weixin')}" title="点击绑定" type="button" 
										class="layui-btn layui-btn-primary layui-btn-sm layui-bind-third"><i class="layui-icon layui-icon-login-wechat"></i></a>	
									</if>

									<if check_user_third('weibo',$data['id']) >
									  <a lay-ajax lay-url="{:url('/third/unbind/type/weibo')}" title="点击解绑" type="button" 
										class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon layui-icon-login-weibo"></i></a>
										<else/>
									  <a data-url="{:url('/third/bind/type/weibo')}" title="点击绑定" type="button" 
										class="layui-btn layui-btn-primary layui-btn-sm layui-bind-third"><i class="layui-icon layui-icon-login-weibo"></i></a>	
									</if>

								</div>
							</div>	

							<div class="layui-form-item" style="margin-top: 22px;text-align: center;">
								<button type="submit" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="submitIframe">立即提交</button>
								<button type="reset" class="layui-btn layui-btn-primary">重置</button>
							</div>												
						</form>
						
					</div>
				</div>
			</div>		    			
		</div>
	</div>
</div>

<!-- // 添加编辑数据 -->
<script type="text/html" id="email" >
<div class="layui-fluid layui-bg-white">
    <form class="layui-form layui-form-fixed" action="/user/email" >
    <div class="layui-form-item">
        <label class="layui-form-label">{:__('邮箱地址')}</label>
        <div class="layui-input-inline">
            <input name="email" placeholder="{:__('请输入邮箱地址')}" type="text" class="layui-input email" lay-verType="tips" lay-verify="required"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">{:__('验证码')}</label>
        <div class="layui-input-inline" style="width: 176px;">
			<input name="captcha" placeholder="{:__('请输入验证码')}" type="text" class="layui-input" lay-verType="tips" lay-verify="required" maxlength="5"  />
        </div>
        <button class="layui-btn layui-btn-sm layui-btn-normal" type="button" lay-ajax lay-url="/user/email" lay-object="email:email"  >{:__('获取')}</button>
    </div>
    <div class="layui-footer layui-form-item layui-center">
        <button class="layui-btn layui-btn-primary" type="button" sa-event="closeDialog" >{:__('取消')}</button>
        <button class="layui-btn layui-btn-normal" lay-filter="submitPage" lay-submit>{:__('提交')}</button>
    </div> 
    </form>
</div>
</script>

<!-- // 添加编辑数据 -->
<script type="text/html" id="mobile" >
<div class="layui-fluid layui-bg-white">
    <form class="layui-form layui-form-fixed" action="/user/mobile" >
    <div class="layui-form-item">
        <label class="layui-form-label">{:__('手机号')}</label>
        <div class="layui-input-inline">
            <input name="mobile" placeholder="{:__('请输入号码')}" type="text" class="layui-input mobile" lay-verType="tips" lay-verify="required"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">{:__('验证码')}</label>
        <div class="layui-input-inline" style="width: 176px;">
			<input name="captcha" placeholder="{:__('请输入验证码')}" type="text" class="layui-input" lay-verType="tips" lay-verify="required" maxlength="5"  />
        </div>
        <button class="layui-btn layui-btn-sm layui-btn-normal" type="button" lay-ajax lay-url="/user/mobile" lay-object="mobile:mobile"  >{:__('获取')}</button>
    </div>
    <div class="layui-footer layui-form-item layui-center">
        <button class="layui-btn layui-btn-primary" type="button" sa-event="closeDialog" >{:__('取消')}</button>
        <button class="layui-btn layui-btn-normal" lay-filter="submitPage" lay-submit>{:__('提交')}</button>
    </div> 
    </form>
</div>
</script>

<include file="public:footer"/>
</body>
<script>
	layui.use(['jquery','form','upload'],function(){
		var $ = layui.jquery;
		var upload = layui.upload;

		// 上传头像
		upload.render({
            elem: '.layui-user-avatar'
            ,url: '/user/avatars' // 默认的上传地址
            ,method: 'post'
            ,accept: 'file'
            ,before: function(res) {
            	layer.msg('上传中');
            },done: function(res, index, upload) {
                // 上传成功
                if (res.code == 200) {
                    $('.imgHead').attr('src',res.url+'?'+parseInt(100*Math.random()));
                }

				layer.msg(res.msg);
            }
        })

        // 修改邮箱
        $('.testd').click(function(){
 
        	layer.open({
        		type: 1,
        		area: ['50%','50%'],
        		content: $('#email').html(),
        		success: function() {

        		}
        	})
        })
		
	})
</script>
</html>